'use client'

import { MdKeyboardDoubleArrowDown } from "react-icons/md"
import { SiChatbot, SiHelpscout, SiHomeassistant } from "react-icons/si"

import AppCard from "@/components/ai/apps/app-card"
import { Separator } from "@/components/ui/separator"
import AppCreator from "@/components/ai/apps/app-creator"
import AssistItem from "@/components/ai/assists/assist-item"
import SimpleChatInput from "@/components/ai/chat/simple-chat-input"

import { AppType } from "@prisma/client"
import { getRandomInt } from "@/lib/utils"
import { useCurrentUser } from "@/hooks/use-current-user"

const modules = [
    {
        icon: SiChatbot,
        name: '智慧问答',
        description: '智慧问答系统在职业教育中，能够通过其强大的信息处理能力和个性化的交互体验，为产教融合提供精准的知识和技能支持。它能够实时解答学生和教师的问题，提供定制化的学习资源，促进理论与实践的紧密结合，从而提高教育质量和就业匹配度。',
        thumbnail: '/images/7.1.1.png',
        type: AppType.ChatBot,
        subtitle: '',
        link: 'http://ai.imetaedu.com.cn/portal/organization/list'
    },
    {
        icon: SiHomeassistant,
        name: '专业教学助手',
        description: '根据行业需求和企业标准，为学生提供实时的专业知识更新和技能训练。通过模拟真实工作环境，它帮助学生掌握实用技能，同时为教师提供教学资源和方法，以实现产教融合，提高教育的实效性和学生的就业竞争力。',
        thumbnail: '/images/7.2.1.jpg',
        type: AppType.ChatBot,
        subtitle: '',
        link: 'http://ai.imetaedu.com.cn/portal/supportteacher/list'
    },
    {
        icon: SiHelpscout,
        name: '智能助教',
        description: '通过模拟真实工作场景，提供定制化的学习路径和即时反馈，促进学生技能的快速提升。它能够根据行业动态实时更新教学内容，协助教师进行个性化教学，实现产教深度融合，提高学生的实践能力和就业适应性。',
        thumbnail: '/images/7.3.1.jpg',
        type: AppType.ChatBot,
        subtitle: '',
        link: 'http://ai.imetaedu.com.cn/portal/coursecenter/list'
    },
]

const greetings = [
    `Hello there! Welcome to the community!`,
    `Hi! It's great to see a new face around here.`,
    `Hey! Glad you could join us.`,
    `Howdy! Welcome aboard!`,
    `Greetings and salutations! Happy to have you here.`,
    `Well, hello! Nice to meet you in this digital space.`,
    `Hi there! Hope you're settling in nicely.`,
    `Welcome! Ready to dive into some interesting conversations?`,
    `Hey hey! Excited to get to know you!`,
    `Hello and a warm welcome to you! Let's make some virtual memories together.`,
]

const AIPage = () => {
    const user = useCurrentUser()

    return (
        <div className="snap-y snap-mandatory overflow-y-scroll h-[calc(100vh-96px)] max-w-[1560px] flex-grow">
            <div className="h-full relative snap-start flex justify-center">
                <div className="w-4/5 md:w-3/5 flex flex-col items-start justify-center gap-y-6">
                    <div className="flex flex-col space-y-2">
                        <h1 className="text-xl text-primary md:text-3xl font-bold">Hi, {user?.name}</h1>
                        <p className="text-xs md:text-sm text-muted-foreground">AiToB.Ai，解锁AI的力量: 极大提高您的工作效率!</p>
                        {/*
                        <div className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
                            <TypewriterComponent
                                options={{
                                    strings: [
                                        "Chatbot.",
                                        "Photo Generation.",
                                        "Blog Writing.",
                                        "Mail Writing."
                                    ],
                                    autoStart: true,
                                    loop: true,
                                }}
                            />
                        </div>
                    */}
                    </div>
                    <SimpleChatInput />
                    <div className="hidden md:grid w-full grid-cols-1 md:grid-cols-3 gap-4">
                        <AppCreator />
                        <AppCard
                            id={''}
                            name={'科研助手'}
                            type={AppType.ChatBot}
                            desc={'通过集成先进的数据分析、自然语言处理和文献管理功能，提供课题规划、论文撰写及学术发表的一站式解决方案。'}
                            greeting={greetings[getRandomInt(0, greetings.length - 1)]}
                        />
                        <AppCard
                            id={''}
                            name={'项目助手'}
                            type={AppType.ChatBot}
                            desc={'利用自动化技术，为教师提供项目通知管理、信息填报自动化及文档生成服务，提升项目管理效率和准确性。'}
                            greeting={greetings[getRandomInt(0, greetings.length - 1)]}
                        />
                    </div>
                </div>
                <MdKeyboardDoubleArrowDown className="absolute bottom-2 text-muted-foreground h-8 w-8 animate-bounce" />
            </div>
            <div className="h-full snap-start p-6">
                <div className="flex flex-col py-4 md:px-32 md:py-8 items-center justify-center">
                    <div className=" max-w-[960px] space-y-8 md:space-y-16">
                        {modules.map((app, idx) => (
                            <div key={idx} className="w-full flex flex-col space-y-8 md:space-y-16 items-center">
                                <AssistItem data={app} reverseLayout={(idx & 1) === 0} />
                                {(idx !== (modules.length - 1)) && <Separator className="w-64 md:w-96" />}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default AIPage